<template>
    <div v-if="two.tables && two.tables.length!==0">
        <el-form :model="forms" :rules="rules" ref="formsRef">
            <el-form-item label="数据库表" prop="tables">
                <el-select
                        v-model="forms.tables"
                        multiple
                        clearable
                        @change="doTableChange"
                        placeholder="请选择数据库表"
                >
                    <el-option
                            v-for="item in two.tables"
                            :key="item"
                            :label="item"
                            :value="item"
                    />
                </el-select>
                <span class="zc-description">选择需要进行操作数据库表，同步映射数据源模型</span>
            </el-form-item>
        </el-form>
        <el-tabs v-model="two.activeName" v-if="two.showMode">
            <el-tab-pane label="模型映射" name="mode">
                <el-row :gutter="20">
                    <el-col :span="6" class="zc-tabs-link">
                        <span v-for="tab in forms.tables"
                              :class="{'zc-tabs-link-text':true, 'is-active': tab === two.selected }"
                              @click="doSelect(tab)">{{
                            tab
                            }}</span>
                    </el-col>
                    <el-col :span="18">
                        <el-form :model="formsMode[two.selected]" :rules="rules">
                            <el-form-item label="模型名称" prop="name">
                                <el-input v-model="formsMode[two.selected].name"></el-input>
                            </el-form-item>
                            <el-form-item label="主键字段" prop="primaryKey">
                                <el-select
                                        v-model="formsMode[two.selected].primaryKey"
                                        placeholder="请选择主键字段"
                                >
                                    <el-option
                                            v-for="item in formsMode[two.selected].columns"
                                            :key="item.name"
                                            :label="item.name"
                                            :value="item.name"
                                    />
                                </el-select>
                            </el-form-item>
                            <el-form-item label="标题字段">
                                <el-select
                                        v-model="formsMode[two.selected].title"
                                        placeholder="请选择标题字段"
                                >
                                    <el-option
                                            v-for="item in formsMode[two.selected].columns"
                                            :key="item.name"
                                            :label="item.name"
                                            :value="item.name"
                                    />
                                </el-select>
                            </el-form-item>
                            <el-form-item label="数据模型配置" required>
                                <el-col :span="23" class="el-col-form">
                                    <el-table
                                            :data="formsMode[two.selected].columns"
                                            ref="multipleTable"
                                            :border="true"
                                            size="small"
                                            style="width:100%;margin-bottom: 15px;"
                                    >
                                        <el-table-column prop="remark" label="显示名称" align="left">
                                            <template #default="{row}">
                                                <div class="input-box">
                                                    <el-input
                                                            size="small"
                                                            v-model="row.remark">
                                                    </el-input>
                                                </div>
                                            </template>
                                        </el-table-column>
                                        <el-table-column prop="name" label="表字段名称" align="left"></el-table-column>
                                        <el-table-column prop="javaName" label="显示字段名称"
                                                         align="left"></el-table-column>
                                    </el-table>
                                </el-col>
                            </el-form-item>
                        </el-form>
                    </el-col>
                </el-row>
            </el-tab-pane>
        </el-tabs>
    </div>
    <el-empty description="无需映射" v-else/>
</template>
<script setup type="ts">
import {onMounted, reactive, ref} from "vue";
import {listColumns, listTables} from "@/api/api.dbms";

const formsRef = ref();
const props = defineProps({
    id: {}
});

const two = reactive({
    activeName: 'mode',
    selected: '',
    tables: [],
    showMode: false,
    columns: {}
})

const forms = reactive({
    tables: []
});

const formsMode = reactive({});

const rules = reactive({
    name: [{required: true, message: '请输入模型名称', trigger: 'blur'}],
    primaryKey: [{required: true, message: '请选择主键字段', trigger: 'blur'}]
})

const doSubmit = async () => {

}


const doTableChange = (tables) => {
    if (tables.length === 0) {
        two.selected = '';
        two.showMode = false;
    } else {
        if (!two.selected) {
            two.selected = tables[0];
            doLoadColumns(two.selected);
        }
    }
}

const doSelect = (tab) => {
    two.selected = tab;
    doLoadColumns(two.selected);
}

const doLoadColumns = (table) => {
    listColumns({id: props.id, table: table}).then(res => {
        res = res.data || [];
        two.columns[table] = res;
        const mode = {name: table, primaryKey: '', title: '', columns: []};
        res.forEach(e => {
            const c = {remark: e.comment, name: e.name, javaName: e.javaName};
            mode.columns.push(c);
        })
        formsMode[two.selected] = mode;
        two.showMode = true;
    })
}


const loadTables = () => {
    listTables({id: props.id}).then(res => {
        two.tables = res.data || [];
    })
}

onMounted(() => {
    loadTables();
})

const exposed = {
    doSubmit
};
defineExpose(exposed);
</script>
